<template>
  <div class="local-music">
    <div class="header">
      <div class="title">
        <span class="main">本地音乐</span>
        <span class="count">({{ songs.length }})</span>
      </div>
      <div class="actions">
        <el-button @click="showDirDialog">选择目录</el-button>
      </div>
    </div>

    <local-music-table :table-data="songs" :height="tableHeight"/>

    <!-- 目录选择弹窗 -->
    <el-dialog
      v-model="dirDialogVisible"
      title="本地音乐目录"
      width="500px"
    >
      <div class="dir-list">
        <el-checkbox-group v-model="checkedDirs">
          <el-checkbox
            v-for="dir in musicStore.localMusicDirs"
            :key="dir"
            :label="dir"
          >
            {{ dir }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addNewDir">新增目录</el-button>
          <el-button type="primary" @click="confirmDirs">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useMusicStore } from '@/store/MusicStore'
import type { LocalSong } from '@/assets/apis/MusicDataType'
import LocalMusicTable from '@/components/Table/LocalMusicTable.vue'
import { ElMessage } from 'element-plus'

const musicStore = useMusicStore()
const dirDialogVisible = ref(false)
const checkedDirs = ref<string[]>([])
const songs = ref<LocalSong[]>([])
const tableHeight = computed(() => 'calc(100vh - 300px)')

// 显示目录选择弹窗
function showDirDialog() {
  checkedDirs.value = [...musicStore.localMusicDirs]
  dirDialogVisible.value = true
}

// 新增目录
async function addNewDir() {
  try {
    const result = await window.electron.ipcRenderer.invoke('select-dirs')
    if (result.filePaths && result.filePaths.length > 0) {
      const newDir = result.filePaths[0]
      if (!musicStore.localMusicDirs.includes(newDir)) {
        musicStore.$patch((state) => {
          state.localMusicDirs.push(newDir)
        })
        checkedDirs.value.push(newDir)
      }
    }
  } catch (error) {
    console.error('选择目录失败:', error)
  }
}

// 确认目录选择
async function confirmDirs() {
  musicStore.$patch((state) => {
    state.localMusicDirs = [...checkedDirs.value]
  })
  dirDialogVisible.value = false
  await loadLocalMusic()
}

// 加载本地音乐
async function loadLocalMusic() {
  try {
    if (!musicStore.localMusicDirs.length) {
      songs.value = []
      return
    }

    const localSongs = await window.electron.ipcRenderer.invoke(
      'scan-music-files',
      [...musicStore.localMusicDirs] // 创建数组的副本
    )
    console.log("本地歌曲",localSongs)
    songs.value = localSongs.map(song => ({
      name: song.name,
      singer: song.singer,
      size: song.size,
      duration: song.duration,
      url: song.url
    }))
  } catch (error) {
    console.error('加载本地音乐失败:', error)
    ElMessage.error('加载本地音乐失败')
  }
}

onMounted(() => {
  loadLocalMusic()
})
</script>

<style scoped lang="scss">
.local-music {
  padding: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      .main {
        font-size: 24px;
        font-weight: bold;
      }
      .count {
        font-size: 14px;
        color: var(--el-text-color-secondary);
        margin-left: 8px;
      }
    }
  }

  .dir-list {
    max-height: 300px;
    overflow-y: auto;

    :deep(.el-checkbox) {
      display: block;
      margin-left: 0;
      margin-bottom: 10px;
    }
  }
}
</style> 